<template>
  <div id="Record">
    <van-nav-bar title="就诊记录" left-text="" left-arrow @click-left="$router.push('/completecase')" />
    <div class="second">
      <van-image position="center" fit="cover" round width="5rem" height="5rem"
        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
    </div>
    <div class="third">
      <span>{{ myInformation.name }}</span>
      <span v-if="myInformation.sex==1">男</span>
      <span v-else>女</span>
      <span>{{ myInformation.age }}</span>
    </div>
    <div class="forth">
      <div><span>就诊时间：{{ myInformation.date }}</span><span>就诊体重:{{ myInformation.weight }}</span></div>
      <div><span>就诊医院：{{ myInformation.hospital }}</span><span>就诊医生:</span></div>
    </div>

    <van-divider :style="{ color: '#1989fa', borderColor: 'rgb(79, 96, 96)',
    }" />

    <div class="fifth">
      <van-tabs animated type='line'>
        <van-tab title="诊断">
          <div class="is" v-if="dataList.symptom!=''">是否诊断：&nbsp;&nbsp;&nbsp; <span style="color:gray">是</span></div>
          <div class="is" v-else="dataList.symptom!=''">是否诊断：&nbsp;&nbsp;&nbsp; <span style="color:gray">否</span></div>
          <br>
          <hr>
          <div>诊断内容</div>
          <br>
          <div class="dataDiv">
            <span style="color:gray" v-for="item in dataList">{{ item.symptom }}:&nbsp; {{ item.symptomType
              }}--{{item.symptomName
              }}</span>
          </div>
        </van-tab>
        <van-tab title="辅助检查">
          <div v-for="item in fuzhujiancha">
            <div>脑电图：&nbsp;&nbsp;&nbsp;<span style="color:gainsboro">{{ item.exceptiontype }}</span></div>
            <br><br>
            <div style="color:gray">
              {{ item.exceptionbranch }}：{{ item.exceptionname }}
            </div>
            <br>
            <div class="img">脑电图图片<br>
              <van-image width="10rem" height="10rem" fit="cover" :src='item.brainmappingurl' />
            </div>
            <hr>
            <div class="ct">
              <span>核磁/CT</span>&nbsp;&nbsp;&nbsp;<span style="color:gainsboro">异常或正常</span>
              <br><br>
              <span style="color:gainsboro">右枕叶异常</span>
              <br><br>
              <span>核磁/CT图片<br>
                <van-image width="10rem" height="10rem" fit="cover" src="item.cturl" />
              </span>
            </div>
            <hr>
            <div class="gens">
              <span>基因</span>&nbsp;&nbsp;&nbsp;<span style="color:gray">正常或者异常</span>
              <hr>
            </div>
          </div>
        </van-tab>
        <van-tab title="药物治疗">
          <!-- 第一周数据 -->
          <div class="week" v-if="oneweekdata.length!==0">
            <div class="firstrow">
              <h3>第一周</h3><span>事件日期</span>
            </div>
            <div class="secrow" v-for="item in oneweekdata">
              <h3>{{ item.drugname }}</h3><span>{{ item.dose }}</span>
            </div>
          </div>
          <div v-else class="undefine">当前暂无第一周数据
            <hr>
          </div>

          <!-- 第二周数据 -->
          <div class="week" v-if="this.twoweekdata.length!=0">
            <div class="firstrow">
              <h3>第二周</h3><span>事件日期</span>
            </div>
            <div class="secrow" v-for="item in twoweekdata">
              <h3>{{ item.drugname }}</h3><span>{{ item.dose }}mg/日</span>
            </div>
          </div>
          <div v-else class="undefine">当前暂无第二周数据
            <hr>
          </div>

          <!-- 第三周数据 -->
          <div class="week" v-if="this.threeweekdata.length!=0">
            <div class="firstrow">
              <h3>第三周</h3><span>事件日期</span>
            </div>
            <div class="secrow" v-for="item in threeweekdata">
              <h3>{{ item.drugname }}</h3><span>{{ item.dose }}mg/日</span>
            </div>
          </div>
          <div v-else class="undefine">当前暂无第三周数据
            <hr>
          </div>


          <!-- 第四周数据 -->
          <div class="week" v-if="this.fourweekdata.length!=0">
            <div class="firstrow">
              <h3>第四周</h3><span>事件日期</span>
            </div>
            <div class="secrow" v-for="item in fourweekdata">
              <h3>{{ item.drugname }}</h3><span>{{ item.dose }}mg/日</span>
            </div>
          </div>
          <div v-else class="undefine">当前暂无第四周数据
            <hr>
          </div>

          <!-- ———————————————————————————————— -->
        </van-tab>
        <van-tab title="特殊治疗">
          <div class="special">
            <span>是否手术</span>
            <span style="color:gray" v-if="isOperation.operationName != ''">是</span>
            <span style="color:gray" v-else>否</span>
          </div>
          <br>
          <div class="isOperationDiv">
            <span style="color:gray" v-for="item in isOperation">{{ item.operationName }}</span>
          </div>
          <hr>
          <div class="special">
            <span>甲强==激素治疗</span>
            <span style="color:gainsboro" v-if="zhiliaoshouduan.indexOf('甲强==激素治疗')!=-1">是</span>
            <span style="color:gainsboro" v-else>否</span>
          </div>
          <hr>
          <div class="special">
            <span>免疫治疗</span>
            <span style="color:gainsboro" v-if="zhiliaoshouduan.indexOf('免疫治疗')!=-1">是</span>
            <span style="color:gainsboro" v-else>否</span>
          </div>
          <hr>
          <div class="special">
            <span>生酮饮食</span>
            <span style="color:gainsboro" v-if="zhiliaoshouduan.indexOf('生酮饮食')!=-1">是</span>
            <span style="color:gainsboro" v-else>否</span>
          </div>
          <hr>
          <div class="special">
            <span>其他</span>
            <span style="color:gainsboro" v-if="zhiliaoshouduan.indexOf('其他')!=-1">是</span>
            <span style="color:gainsboro" v-else>否</span>
          </div>
          <hr>
        </van-tab>
      </van-tabs>
    </div>


  </div>
</template>

<script>
export default {
  name: 'Record',
  data() {
    return {
      dataList: "",
      //患者信息
      myInformation: '',
      // 是否手术
      isOperation: '',
      teshuzhiliao: '',
      zhiliaoshouduan: [],
      fuzhujiancha:[],
      oneweekdata: [],
      twoweekdata: [],
      threeweekdata: [],
      fourweekdata: [],
      naokeyichang:'',//脑电图异常内容
    };
  },
  created() {
    //诊断
    this.getRecordPageData();
    //病人信息
    this.patientInformation();
    //是否手术及手术类型
    this.operation();
    //特殊治疗内容数据
    this.specialTreatment();
    //辅助检查数据
    this.SupplementaryExamination();
    //第一周数据
    this.getFirstWeek();
    // 第二周数据
    this.getTwoWeek();
    //3
    this.getThreeWeek();
    //4
    this.getFourWeek();
  },
  components: {},

  computed: {},

  methods: {
    //第一周数据方法
    getFirstWeek(){
      this.$axios({
        method: 'get',
        url: 'http://172.16.110.210:8080/getDrugInfoByTimeOne',
      }).then(res => {
        this.oneweekdata = res.data.data;
        // console.log(this.oneweekdata);

      })
    },
    //第二周数据方法
    getTwoWeek() {
      this.$axios({
        url: 'http://172.16.110.210:8080/getDrugInfoByTimeTwo',
      }).then(res => {
        this.twoweekdata = res.data.data;
        // console.log(this.twoweekdata);
      })
    },
    //第三周数据方法
    getThreeWeek(){
      this.$axios({
        url: 'http://172.16.110.210:8080/getDrugInfoByTimeThree',
      }).then(res => {
        this.threeweekdata = res.data.data;
        // console.dir(this.threeweekdata.length);

      })
    },
    //第四周数据方法
    getFourWeek() {
      this.$axios({
        url: 'http://172.16.110.210:8080/getDrugInfoByTimeFour',
      }).then(res => {
        this.fourweekdata = res.data.data;
        // console.dir(this.fourweekdata.length);

      })
    },
    //辅助检查数据
    SupplementaryExamination(){
      this.$axios({
        method: 'get',
        url: 'http://172.16.110.210:8080/getAuxInByUserId',
      }).then(res => {
        this.fuzhujiancha = res.data.data;
        console.log(this.fuzhujiancha+'2');
       
      })
    },
    //特殊治疗内容
    specialTreatment() {
      this.$axios({
        method: 'get',
        url: 'http://172.16.110.210:8080/getStInfoByUserId',
      }).then(res => {
        this.teshuzhiliao = res.data.data;
        console.log(this.teshuzhiliao);
        // this.zhiliaoshouduan.push(this.teshuzhiliao[0].st_Name, this.teshuzhiliao[1].st_Name, this.teshuzhiliao[2].st_Name, this.teshuzhiliao[3].st_Name, this.teshuzhiliao[4].st_Name)
        // console.log(this.zhiliaoshouduan);
      })
    },
    //获取是否手术信息
    operation() {
      this.$axios({
        method: 'get',
        url: 'http://172.16.110.210:8080/getOperationByUserId',
      }).then(res => {
        this.isOperation = res.data.data;
        // console.log(this.isOperation);
      })
    },

    // 获取患者自身信息数据
    patientInformation() {
      this.$axios({
        method: 'get',
        url: 'http://172.16.110.210:8080/getPatinetInByPhone'
      }).then(res => {
        this.myInformation = res.data.data
        // console.log(this.myInformation);

      })
    },

    // 获取诊断数据
    getRecordPageData() {
      this.$axios({
        method: "get",
        url: 'http://172.16.110.210:8080/getDiagnoseInByuserId',
        // headers:{
        //   "Content-Type":"application/x-www-form-urlencoded;charset=UTF-8"
        // }
      }).then(res => {
        // this.symptom = res.data.data[0].symptom
        // this.symptomType = res.data.data[0].symptomType
        // this.symptomName = res.data.data[0].symptomName
        this.dataList = res.data.data;
      })
    },
  }
}
</script>

<style lang='less' scoped>



.isOperationDiv {
  display: flex;
  flex-direction: column;
  justify-content: space-around
}


.dataDiv {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.special {
  padding: 20px;
  display: flex;
  justify-content: space-between;
}


.week {
  border-bottom: 1px solid green;

  .firstrow, .secrow, .thirdrow {
    display: flex;
    justify-content: space-around;

    span {
      line-height: 62.77px;
    }
  }
}

.is {
  margin-top: 35px;
}

.second {

  display: flex;
  justify-content: center;
}

.third {
  display: flex;
  justify-content: center;

  span {
    margin: 5px 10px;
    line-height: 32.2px;

  }
}

.forth {
  div {
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
  }
}
.fifth{
  padding: 5px 15px;
}
.undefine{
  padding: 10px;
}
</style>
